<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/vue.js"></script>
	<style>
		/* 定义提示框的基础样式 */
		.message {
			display: inline-block;
			width: 160px;
			height: 24px;
			border: 1px solid #555;
			text-align: center;
			line-height: 24px;
			margin: 10px;
		}

		/* 定义提示框在验证通过时的样式 */
		.success {
			border: 1px solid green;
			background-color: lightgreen;
			color: green
		}

		/* 定义提示框在验证失败时的样式 */
		.msg-fail {
			border: 1px solid red;
			background-color: pink;
			color: red
		}
	</style>
</head>

<body>
	<!-- 
	多数样式的修改，都是同时修改多个css属性，如果用style绑定，每个css属性都要写出来，代码繁琐！		
	批量修改一个元素的多个css属性，应该用class方式，代替style方式		
	将class绑定到一个对象，定义对象的属性变量
-->
	<div id="app">
		<span>电话号码：{{cellphone}}</span>
		<!-- 提示框的样式会变化，部分class需要属性绑定;提示内容会变化，需要{{}}绑定 -->
		<span class="message" :class="{success,'msg-fail':hasErrr}">{{msg}}</span>
	</div>
	<script>
		const msgSuccess = "手机号格式正确！";
		const msgFail = "手机号格式错误！";
		var vm = new Vue({
			el: "#app",
			data: {
				cellphone: "12968021342", //输入的手机号
				msg: msgSuccess, //绑定提示信息的内容,默认是正确的						
				//绑定提示信息的部分样式。
				success: true,
				hasErrr: false
			},

			computed: {
				isRight() {
					//定义正则验证cellphone的内容
					var reg = /^1[3-9]\d{9}$/;
					//如果用正则验证cellphone的内容通过
					return reg.test(this.cellphone);
				},
			},
			watch: {
				cellphone() {
					if (this.isRight) {//手机号码验证有效							
						this.success = true;//更改为成功样式
						this.hasErrr = false;
						this.msg = msgSuccess; //修改span的提示信息内容
					} else { //否则如果验证无效							
						this.success = false;
						this.hasErrr = true;//更改为失败样式
						this.msg = msgFail;//修改span的提示信息内容
					}
				}
			},
		});
			//测试: 在F12->console->vm.cellphone=12968290224
			//测试: 在F12->console->vm.cellphone=15968290221
	</script>
</body>

</html>